<template>
	<div class="menu-list">
		<list-title :data="header"></list-title>
		<div class="warning">
			请谨慎修改，注意以下几点：<br>
			1、API路由<br>
			1.1、apikeyname 	不能随意修改，因为前端已经固定了参数（分布在各个页面），修改起来不容易<br>
			1.2、m/c/a			必须跟后端开发的路由一致<br>
			2、VUE路由<br>
			2.1、VUE.path 		可随意修改，一般按照名称来定<br>
			2.2、VUE.name 		不能随意修改，因为前端已经固定了参数（分布在各个页面），修改起来不容易<br>
			2.3、VUE.component 	不能随意修改，必须跟前端开发的组件路径一直，否则将找不到路由
		</div>
		<el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin-top: 10px"></el-input>
		<div class="tree-title">
			<span>菜单名称</span>
			<span class="content">
				<!-- <span>所属应用</span> -->
				<span style="width: 280px">显示位置</span>
				<!-- <span style="width: 150px">API路由</span>
				<span style="width: 300px">VUE路由</span> -->
				<!-- <span style="width: 100px">排序</span> -->
				<span>显示状态</span>
				<span style="width: 150px">操作</span>
			</span>
		</div>
		<el-tree
		:data="menuList"
		lazy
		show-checkbox
		node-key="id"
		:default-expand-all="false"
		:expand-on-click-node="false"
		:filter-node-method="filterNode"
		:load="getChildNode"
		v-loading="loading"
		element-loading-text="拼命加载中"
		element-loading-spinner="el-icon-loading"
		element-loading-background="rgba(255, 255, 255, 0.92)"
		@node-drop="handleDrop"
		draggable
		:allow-drop="allowDrop"
		ref="tree">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span>{{ node.label.name }}</span>
				<span class="content">
					<!-- <span>{{ (data.appInfo != null)?data.appInfo.app_name:"" }}</span> -->
					<span style="width: 280px">
						<el-radio-group size="mini" v-model="data.showflag" @change="changeShowflag(node.key, data)">
							<el-radio-button label=1>全部</el-radio-button>
							<el-radio-button label=2>左侧</el-radio-button>
							<el-radio-button label=3>头部</el-radio-button>
							<el-radio-button label=4>内页</el-radio-button>
						</el-radio-group>
					</span>
					<!-- <span style="width: 150px">{{ (data.apikeyname != null)?data.apikeyname:'-' }}</span>
					<span style="width: 300px">{{ (data.vueRouter != null)?data.vueRouter.name:'-' }}</span> -->
<!-- 					<span style="width: 100px">
						<span class="icon iconfont icon-sort-up" @click="sort(data, 'up')"></span>
						<span class="icon iconfont icon-sort-down" @click="sort(data, 'down')"></span>
					</span> -->
					<span>
						<el-switch v-model="data.display" @change="changeDisplay(node.key, data)"></el-switch>
					</span>
					<span style="width: 150px">
						<el-button type='text' size="mini" @click="handleEdit(node, data)" v-if="auth.editor">编辑</el-button>
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[node.key]">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(node.key, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(node.key, data)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[node.key]' v-if="auth.delete">
								删除 <span class="el-icon-loading" v-if='submitLock[node.key]'></span>
							</el-button>
						</el-popover>
					</span>
				</span>
			</span>
		</el-tree>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {changeBoolToNum, judgeAuth} from "static/js/common.js"
import {domain} from '@/api';
import {mapGetters} from 'vuex'

export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '菜单列表' + ((this.$route.query.app_name)?('[' + this.$route.query.app_name + ']'):'[认证中心]'),
				reload: true,
				buttons: [
					{
						title: '添加菜单',
						type: 'primary',
						pathName: 'pc/devper/menu/Menu',
						auth: false,
						query: {
							app_info_id: this.$route.query.app_info_id,//如果是应用中心点过来的，会传app_info_id，需要带给添加页面
							app_name: this.$route.query.app_name//如果是应用中心点过来的，会传app_name，需要带给添加页面
						},
					}
				]
			},
			auth: {
				editor: false,//编辑
				delete: false,//删除
				changeState: false,//显示状态
				changePosition: false,//显示位置
				sort: false,//排序
			},
			loading: true,
			filterText: '',//搜索关键词
			menuList: [],
			tableLoading: true,
			delTip: [],//刪除提示
			submitLock: []
		};
	},
	components: {
		ListTitle,
		ListTable,
	},
	created: function() {
		/*获取所有菜单数据*/
		this.getMenuList()
		/*权限判断显示*/
		this.header.buttons[0].auth = (judgeAuth('addMenu', this.allMenuList) == undefined)?false:true
		this.auth.editor = (judgeAuth('modifyMenu', this.allMenuList) == undefined)?false:true
		this.auth.delete = (judgeAuth('deleteMenu', this.allMenuList) == undefined)?false:true
		this.auth.changeState = (judgeAuth('setMenuDisplay', this.allMenuList) == undefined)?false:true
		this.auth.changePosition = (judgeAuth('setMenuShowflag', this.allMenuList) == undefined)?false:true
		this.auth.sort = (judgeAuth('menuSort', this.allMenuList) == undefined)?false:true
	},
	watch: {
		/*搜索关键词*/
		filterText(val) {
			this.$refs.tree.filter(val);
		},
		/*监听路由的app_info_id的变化,应用菜单点进来，会带app_info_id参数*/
		$route: function(newVal, oldVal){
			if(newVal.query.app_info_id != oldVal.query.app_info_id){
				this.reload();
			}
		}
	},
	methods: {
		/*获取菜单*/
		getMenuList: function(parentid = 0, fn = ''){
			// this.$baseURL('http://super.ac.comdd')
			// console.log(this.$route.query.app_info_id)
			this.$baseURL(domain.ac)
			if(this.$api.menuList != undefined){
				this.$get(this.$api.menuList, {
					'parentid': parentid,
					'type': 'ele',
					'display': 0,
					'app_info_id': (this.$route.query.app_info_id == undefined)?0:this.$route.query.app_info_id
				}).then(res => {
					// console.log(res);
					// if(res.data.code == 10007){//后台提示需要登录
					// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
					// 	this.reload();
					// }
					if(res.data.code === 0){
						if(res.data.data != undefined && fn == ''){
							this.menuList = res.data.data
						}
						if(fn != ''){
							if(res.data.data == undefined){
								fn([])
							}else{
								fn(res.data.data)
							}
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {
					this.loading = false
				}) 
			}
		},
		/*加载子节点内容*/
		getChildNode(node, resolve){
			if(node.data.id){
				this.getMenuList(node.data.id, resolve)
			}
		},
		/*编辑菜单*/
		handleEdit(index, row) {
			// console.log(row.id);
			this.$router.push(
				{
					name: 'pc/devper/menu/Menu', 
					query: {
						id: row.id, 
						app_info_id: this.$route.query.app_info_id,
						app_name: this.$route.query.app_name
					}
				}
			)
		},
		/*删除菜单*/
		handleDelete(index, row) {
			if(!this.submitLock[index+1]){
				this.submitLock[index+1] = true//锁住当前的 删除按钮
				this.delTip.splice(index+1, 1, false)//提示消失
				/*请求后台删除*/
				this.$baseURL(domain.ac)
				if(this.$api.deleteMenu != undefined){
					this.$get(this.$api.deleteMenu, {
						'id': row.id
					}).then(res => {
						// if(res.data.code == 10007){//后台提示需要登录
						// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
						// 	this.reload();
						// }
						if(res.data.code == 0){
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'success'
							});
							this.reload();
						}else{
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'error'
							});
						}
						this.submitLock[index+1] = false//释放当前的 删除按钮
					})
					.catch(err => {})
					.finally(() => {}) 
				}
			}
		},
		/*过滤节点*/
		filterNode(value, data) {
			if (!value) return true;
			return data.label.name.indexOf(value) !== -1;
		},
		/*列表中直接修改 显示位置*/
		changeShowflag(index, row){
			this.$baseURL(domain.ac)
			if(this.$api.setMenuShowflag != undefined){
				this.$post(this.$api.setMenuShowflag, {
					'Menu': {
						'id': row.id,
						'showflag': row.showflag
					}
				}).then(res => {
					// if(res.data.code == 10007){//后台提示需要登录
					// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
					// 	this.reload();
					// }
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*列表中直接修改 是否显示*/
		changeDisplay(index, row){
			/*请求后台*/
			this.$baseURL(domain.ac)
			if(this.$api.setMenuDisplay != undefined){
				this.$post(this.$api.setMenuDisplay, {
					'Menu': {
						'id': row.id,
						'display': row.display
					}
				}).then(res => {
					// if(res.data.code == 10007){//后台提示需要登录
					// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
					// 	this.reload();
					// }
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		//拖拽完毕 调用排序接口
		handleDrop(draggingNode, dropNode, dropType, ev) {
			// console.log(dropNode.data)
			this.$baseURL(domain.ac)
			if(this.$api.menuSort != undefined){
				this.$post(this.$api.menuSort, {
					'sort': draggingNode.data.id,
					'target': dropNode.data.id,
					'location': dropType
				}).then(res => {
					// if(res.data.code == 10007){//后台提示需要登录
					// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
					// 	this.reload();
					// }
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		//判断拖动是否满足条件
		allowDrop(draggingNode, dropNode, type) {
			if(type !== 'inner' && draggingNode.data.parentid == dropNode.data.parentid){//不能进入内部、必须是同一目录
				return true;
			}
		},
		/*排序*/
		// sort(row, flag='up'){
		// 	if(flag == 'up'){//向上移动一个
		// 		let menuListTEMP = JSON.parse(JSON.stringify(this.menuList))
		// 		menuListTEMP[1] = menuListTEMP.splice(2, 1, menuListTEMP[1])[0]
		// 		this.menuList = menuListTEMP
		// 	}else if(flag == 'down'){//向下移动一个

		// 	}
		// },
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
@import "../../../../../static/css/variable.styl"
.menu-list
	.warning
		color: #8a6d3b
		background-color: #fcf8e3
		border: 1px solid #faebcc
		margin-top: 10px
		padding: 10px
		font-size: 12px
		line-height: 20px
	.tree-title
		flex: 1
		display: flex
		align-items: center
		justify-content: space-between
		padding: 10px 0
		border-bottom: 1px solid #e9ecf4
		font-size: 12px
		font-weight: bold
		color: #909399
		.content
			span
				width: 100px
				display: inline-block
				margin-right: 5px
			span:last-child
				margin-right: 0
				width: 200px
	.el-tree
		/deep/ .el-tree-node__content
			padding: 18px 0
			border-bottom: 1px solid #e9ecf4
		.custom-tree-node
			flex: 1
			display: flex
			align-items: center
			justify-content: space-between
			font-size: 12px
			.content
				span
					width: 100px
					display: inline-block
					margin-right: 5px
					// border: 1px solid red
				span:last-child
					margin-right: 0
					.el-button--small
						padding: 0
				span.icon-sort-up,span.icon-sort-down
					width: 16px
					margin-right: 0px
					color: $theme-color
</style>